import { Col, Row } from "antd"
import React from "react"

interface HandCardImg {
	isShowCardGray: boolean
	isShowCardMark: boolean
	src: string
}

interface PublicCardImg {
	isShowCardGray: boolean
	src: string
}

interface Item {
	seatCodeName: string
	isSelf: boolean
	resultInfo: string
	nickName?: string
	handCardsImg: HandCardImg[]
	publicCardsImg: PublicCardImg[]
	totalNetAmount: number
	netAmount?: number
	insuredNetAmount?: number
	isShowCardEye: boolean
}

interface InsurePoolDetail {
	isInsured: number
}

interface Props {
	item: Item
	insurePoolDetail: InsurePoolDetail
	cardEyeImg: string
	cardMarkImg: string
}

const BottomListItem: React.FC<Props> = ({ item, insurePoolDetail, cardEyeImg, cardMarkImg }) => {
	return (
		<>
			<Col span={3} className="flexCenterLeft">
				<div className="seatPosImgContent">
					<div className="seatPosImgDiv">{item.seatCodeName}</div>
					<div
						className={`resultSpan ${item.isSelf ? "tcblue1" : "tcyellow1"} ${
							["弃牌", "Fold"].includes(item.resultInfo) ? "op50" : ""
						}`}
					>
						{item.resultInfo === "Fold" ? "弃牌" : item.resultInfo}
					</div>
				</div>
			</Col>
			<Col span={9} className="cardImgCol">
				<div>
					<div
						className={`nickNameSpan ${item.isSelf ? "tcblue1" : "tcwhite"} ${
							["弃牌", "Fold"].includes(item.resultInfo) ? "op50" : ""
						}`}
					>
						{item.nickName || "-"}
					</div>
					<div className="flxR aiC jcSB cardImgDiv">
						<div className="flxR">
							{item.handCardsImg.map((handCardImg, index2) => (
								<div key={index2} className="cardImgContent">
									{handCardImg.isShowCardGray || ["弃牌", "Fold"].includes(item.resultInfo) ? (
										<div className="cardGrayStyle"></div>
									) : null}
									{item.isShowCardEye ? (
										<div className="cardEyeStyle">
											<img src={cardEyeImg} />
										</div>
									) : null}
									{handCardImg.isShowCardMark ? (
										<div className="cardMarkStyle">
											<img src={cardMarkImg} />
										</div>
									) : null}
									<img src={handCardImg.src} />
								</div>
							))}
						</div>
						<div className="flxR">
							{item.publicCardsImg.map((publicCardImg, index1) => (
								<div key={index1} className={`cardImgContent ${index1 > 2 ? "ml5" : ""}`}>
									{publicCardImg.isShowCardGray || ["弃牌", "Fold"].includes(item.resultInfo) ? (
										<div className="cardGrayStyle"></div>
									) : null}
									<img src={publicCardImg.src} />
								</div>
							))}
						</div>
					</div>
				</div>
			</Col>
			<Col offset={3} span={9}>
				<Row>
					<Col span={8}>
						<div
							className={`${item.totalNetAmount < 0 ? "tcred1" : "tcgreen1"} ${
								["弃牌", "Fold"].includes(item.resultInfo) ? "op50" : ""
							}`}
						>
							{item.totalNetAmount}
						</div>
					</Col>
					{insurePoolDetail.isInsured === 1 && (
						<>
							<Col span={8}>
								<div
									className={`${item.netAmount && item.netAmount < 0 ? "tcred1" : "tcgreen1"} ${
										["弃牌", "Fold"].includes(item.resultInfo) ? "op50" : ""
									}`}
								>
									{item.netAmount ?? 0}
								</div>
							</Col>
							<Col span={8}>
								<div
									className={`${item.insuredNetAmount && item.insuredNetAmount < 0 ? "tcred1" : "tcgreen1"} ${
										["弃牌", "Fold"].includes(item.resultInfo) ? "op50" : ""
									}`}
								>
									{item.insuredNetAmount ?? 0}
								</div>
							</Col>
						</>
					)}
				</Row>
			</Col>
		</>
	)
}

export default BottomListItem
